<template>
  <div class="app-container">
    <!-- 查询框 -->

    <div class="filter-container">
      <el-input v-model="phone" style="width: 200px;" placeholder="手机号查询..." class="filter-item"/>
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-edit"
        @click="search"
      >
        搜索
      </el-button>
    </div>
    <div v-show="visible" style="width: 70%;margin: auto auto;">
      <div style="height: 100px"/>
      <h3>手术费用</h3>
      <el-table :data="operationList" fit highlight-current-row style="width: 100%;"
                show-summary
                :summary-method="getSummaries">
        <!--              @expand-change="getPatientInfoAndRecord">-->
        <el-table-column class="filter-item" type="expand">
          <template slot-scope="{row}">
            <el-form label-position="left" inline class="demo-table-expand">
              <!-- 行数据详情字段 -->
              <el-form-item label="详细信息">
                <span>{{ row.descript }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>

        <el-table-column prop="createTime" label="手术日期"/>
        <el-table-column prop="createName" label="执行人姓名"/>
        <el-table-column prop="totalMoney" label="手术金额"/>
        <el-table-column label="操作" fit>
          <template slot-scope="{row,$index}">
            <el-button v-if="row.status=='0'" type="success" @click="payOne(row)">支付</el-button>
            <el-button v-if="row.status=='1'" type="info" disabled>已支付</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button
        :disabled="operationPayAll"
        style="margin-left: 560px;margin-top: 20px;margin-bottom: 20px"
        type="primary"
        @click="paySub(operationList)"
      >支付全部手术费用
      </el-button>
      <h3>药品费用</h3>
      <el-table :data="medicinalList" fit highlight-current-row style="width: 100%;"
                show-summary
                :summary-method="getSummaries">
        <el-table-column class="filter-item" type="expand">
          <template slot-scope="{row}">
            <el-form label-position="left" inline class="demo-table-expand">
              <!-- 行数据详情字段 -->
              <el-form-item label="详细信息">
                <span>{{ row.descript }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>

        <el-table-column prop="createTime" label="订单日期"/>
        <el-table-column prop="createName" label="药房人员姓名"/>
        <el-table-column prop="totalMoney" label="药品金额"/>
        <el-table-column label="操作" fit>
          <template slot-scope="{row,$index}">
            <el-button v-if="row.status=='0'" type="success" @click="payOne(row)">支付</el-button>
            <el-button v-if="row.status=='1'" type="info" disabled>已支付</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button
        :disabled="medicinalPayAll"
        style="margin-left: 560px;margin-top: 20px;margin-bottom: 20px"
        type="primary"
        @click="paySub(medicinalList)"
      >支付全部药品费用
      </el-button>
      <h3>护理费用</h3>
      <el-table :data="nursingList" fit highlight-current-row style="width: 100%;"
                show-summary
                :summary-method="getSummaries">
        <el-table-column class="filter-item" type="expand">
          <template slot-scope="{row}">
            <el-form label-position="left" inline class="demo-table-expand">
              <!-- 行数据详情字段 -->
              <el-form-item label="详细信息">
                <span>{{ row.descript }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>

        <el-table-column prop="createTime" label="护理日期"/>
        <el-table-column prop="createName" label="护理人姓名"/>
        <el-table-column prop="totalMoney" label="护理金额"/>
        <el-table-column label="操作" fit>
          <template slot-scope="{row,$index}">
            <el-button v-if="row.status=='0'" type="success" @click="payOne(row)">支付</el-button>
            <el-button v-if="row.status=='1'" type="info" disabled>已支付</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button
        :disabled="nursingPayAll"
        style="margin-left: 560px;margin-top: 20px;margin-bottom: 20px"
        type="primary"
        @click="paySub(nursingList)"
      >支付全部护理费用
      </el-button>
      <h3>住院费用</h3>
      <el-table :data="hospitalization" fit highlight-current-row style="width: 100%;">
        <el-table-column :formatter="dateFormat" prop="inTime" label="住院时间"/>
        <el-table-column prop="outTime" label="出院时间"/>
        <el-table-column prop="totalDay" label="住院天数">
          <template slot-scope="scope">
            <span v-text="totalDay"/>
          </template>
        </el-table-column>
        <el-table-column prop="wardType" label="病房类型">
          <template slot-scope="scope">
            <span v-if="scope.row.wardType==0">普通房</span>
            <span v-if="scope.row.wardType==1">高级房</span>
            <span v-if="scope.row.wardType==2">特护房</span>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="病房单价"/>
        <el-table-column prop="total" label="小计">
          <template slot-scope="scope">
            <span v-text="wardTotal(scope.row)"/>
          </template>
        </el-table-column>
        <el-table-column label="操作" fit>
          <template slot-scope="{row,$index}">
            <el-button v-if="row.outTime===null" type="info" disabled>未出院</el-button>
            <el-button v-if="row.status=='0' && row.outTime!==null" type="success" @click="payApplication(row.id)">支付
            </el-button>
            <el-button v-if="row.status=='1'" type="info" disabled>已支付</el-button>
          </template>
        </el-table-column>
      </el-table>
      <br><br>
      <div style="float: right;font-size: 25px">总计: <span style="font-size: 20px;color: red"
                                                          v-text="totalMoney+'元'"></span></div>
      <br><br>
      <el-button v-if="h1" type="info" disabled style="margin: 40px 260px;width: 200px">未出院</el-button>
      <el-button v-else :disabled="payAll" style="margin: 40px 260px;width: 200px" type="primary" @click="payTotal()">
        支付全部
      </el-button>
    </div>
    <div style="height: 100px"/>
    <el-dialog
      title="请扫码支付"
      :visible.sync="payVisible"
      :before-close="handleClose"
      >
      <div style="height: 100%;">
        <div style="border: 1px gainsboro solid;text-align: center;margin:50px auto;width: 200px">
          <div>
            <span id="money" style="font-size: 25px;color: #ff0000;font-weight: 900;"
                  v-text="payMoney+'  元'"></span>
          </div>
          <div style="padding-left: 20px;">
            <div id="qrcode" style="margin-left: 2px;"></div>
          </div>
          <div style="font-size: 12px;">
            打开手机支付宝
            <br/> 扫一扫付款
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
  </span>
    </el-dialog>
  </div>
</template>

<script>
import {getByPatientPhone, pay, payApplication,getPayQRCode,payQuery} from '@/api/order'
import QRCode from 'qrcodejs2'
export default {
  data() {
    return {
      time:undefined,//定时器
      orderId:'',//订单数据
      isPay:false,//判断是否支付
      payVisible:false,
      totalMoney: 0,
      payMoney:0,//弹窗需要支付的金额
      subMoney: 0,//住院金额小结
      h1: false,
      phone: '',
      visible: false,
      totalDay: '',
      nursingList: [],
      operationList: [],
      medicinalList: [],
      hospitalization: [],
      nursingPayAll: false,
      operationPayAll: false,
      medicinalPayAll: false,
      payAll: false
    }
  },
  methods: {
    //关闭弹窗
    handleClose(done){
      if(!this.isPay){
        this.$confirm('你还没支付确认关闭？')
          .then(_ => {
            done();
          })
      }
    },
    //计算总价的逻辑
    getSummaries(param) {
      const {columns, data} = param;
      const sums = [];
      sums[1] = "小计"
      let total = 0;
      for (let i of data) {
        if (i.status == 0) {
          total += i.totalMoney;
        }
      }
      sums[3] = total;
      return sums;
    },
    // 日期格式化
    dateFormat(row) {
      return row.inTime.substring(0, 10)
    },
    search() {
      if (!/^\d{11}$/.test(this.phone)) {
        this.$message({
          message: '手机号不合法',
          type: 'warning'
        })
        return
      }
      // 搜索数据
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      getByPatientPhone(this.phone).then(res => {
        this.nursingList = []
        this.medicinalList = []
        this.operationList = []
        this.hospitalization = []
        const data = res.content
        if (data == null) {
          loading.close()
        } else {
          this.nursingList = data.nursing
          this.medicinalList = data.medicinal
          this.operationList = data.operation
          this.hospitalization = data.application
          if (this.hospitalization[0].outTime === null) {
            this.h1 = true;
          }
          this.nursingPayAll = this.checkPayAll(this.nursingList)
          this.medicinalPayAll = this.checkPayAll(this.medicinalList)
          this.operationPayAll = this.checkPayAll(this.operationList)
          if (this.nursingPayAll && this.medicinalPayAll &&
            this.operationPayAll && this.hospitalization[0].status == '1') {
            this.payAll = true
          }
          this.sumMoney()
          loading.close()
        }
      })
      this.visible = true
    },
    //计算总金额
    sumMoney() {
      let total = 0;
      for (let i of this.nursingList) {
        if (i.status != 1) {
          total += i.totalMoney;
        }
      }
      for (let i of this.operationList) {
        if (i.status != 1) {
          total += i.totalMoney;
        }
      }
      for (let i of this.medicinalList) {
        if (i.status != 1) {
          total += i.totalMoney;
        }
      }
      let a = this.hospitalization[0]
      if (a.status != '1') {
        total += this.sumDay(a) * a.price;
      }
      this.totalMoney = total;
    },
    // 天数计算
    sumDay(row) {
      const startTime = new Date(row.inTime)
      let endTime
      if (row.outTime == null) {
        endTime = new Date()
      } else {
        endTime = new Date(row.outTime)
      }
      const s = endTime.getTime() - startTime.getTime()
      this.totalDay = Math.round(s / (24 * 60 * 60 * 1000))
      return this.totalDay
    },
    // 病房价格计算
    wardTotal(row) {
      this.subMoney = row.price * this.totalDay;
      return this.subMoney
    },
    // 检查是否全部支付
    checkPayAll(list) {
      for (const i of list) {
        if (i.status == '0') {
          return false
        }
      }
      return true
    },
    payList(ids) {
      pay(ids).then(res => {
        this.$notify({
          title: '成功',
          message: '支付成功',
          type: 'success',
          duration: 2000
        })
        this.search()
      })
    },
    // 支付一个小类别
    paySub(list) {
      const ids = new Array()
      for (const i of list) {
        ids.push(i.id)
      }
      this.payList({id: ids})
    },
    // 支付一条记录
    payOne(row) {
      this.payVisible=true;
      this.payMoney=row.totalMoney;
      //发送请求调支付二维码
      getPayQRCode(row).then(res=>{
        if(res.content==null){
          this.$message.error('生成二维码出错,联系管理员');
          return;
        }
        this.orderId=row.id
        new QRCode("qrcode", {
          text: res.content.qrCode,
          width: 160,
          height: 160,
          colorDark: "#000000",
          colorLight: "#ffffff",
          correctLevel: QRCode.CorrectLevel.H
        });
        //立即调用查询接口
        this.time=setInterval(this.payQuery,1000)
      })
    },
    payQuery(){
      payQuery(this.orderId).then(res=>{
        if(res.content==true){
          clearInterval(this.time);
          this.isPay=true;
          this.payVisible=false;
          this.$notify({
            title: '成功',
            message: '支付成功',
            type: 'success',
            duration: 2000
          })
          this.search()
        }
      })
    },
    payTotal() {
      const ids = new Array()
      for (const i of this.nursingList) {
        ids.push(i.id)
      }
      for (const i of this.medicinalList) {
        ids.push(i.id)
      }
      for (const i of this.operationList) {
        ids.push(i.id)
      }
      this.payList({id: ids})
      this.payApplication()
    },
    // 支付住院费用
    payApplication() {
      payApplication(this.hospitalization[0].id).then(res => {
        this.$notify({
          title: '成功',
          message: '支付成功',
          type: 'success',
          duration: 2000
        })
        this.search()
      })
    }
  }
}
</script>

<style>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
